<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="品鉴酒名称">
        <br> <br>
        <el-input style="margin-left:-70px;width:200px" v-model.trim="formInline.name" placeholder clearable></el-input>
      </el-form-item>
      <el-form-item label="品鉴酒编码">
        <br> <br>
        <el-input style="margin-left:-70px;width:200px" v-model.trim="formInline.tastCode" placeholder clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <br> <br>
        <el-select style="margin-left:-40px;width:200px" v-model="formInline.status" clearable>
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <div style="width:100%;display:flex;justify-content:flex-end;">
<el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toAdd()" icon="el-icon-edit" size="mini">新增</el-button>
      </el-form-item>
      </div>
      
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" align="center" width="60" ></el-table-column>

      <el-table-column prop="tastCode" label="品鉴酒编码" width align="left"></el-table-column>
  
      <el-table-column prop="name" label="品鉴酒名称" width align="left" show-overflow-tooltip width="160"></el-table-column>
      <el-table-column prop="sortNo" label="排序" width align="left" show-overflow-tooltip></el-table-column>
            <el-table-column prop="spec" label="规格(ml)" width align="left" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" width align="left">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">禁用</span>
          <span v-if="scope.row.status == 1">启用</span>
        </template>
      </el-table-column>
      <el-table-column prop="packetQuotaMace" label="兑换所需酒红包额(ml)" width align="left" show-overflow-tooltip width="200"></el-table-column>

       <el-table-column prop="upLimit" label="每月兑换上限" width align="left" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="toEdit(scope.row)"   v-if="scope.row.status == 0">编辑</el-button>
              <el-button type="text" size="mini" @click="toEditsee(scope.row)">详情</el-button>
          <el-button
                              type="text"
                              @click="updatePrize(scope.row.uuid, '1')"
                              v-if="scope.row.status == 0"
                          >启用</el-button>
                          <el-button
                              type="text"
                              @click="updatePrize(scope.row.uuid, '0')"
                              v-if="scope.row.status == 1"
                          >禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-form :inline="true" :model="formInline">
      <el-form-item style="margin-top: 6px;"></el-form-item>
    </el-form>
    <div class="block" style="margin-top:-49px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisibleImg">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
// import {
//   queryPrize,
//   addPrize,
//   deletePrize,
//   updatePrize
// } from "@/api/prizeLibrary";
import {
  queryPrize,
  addPrize,
  deletePrize,
  updatePrize
} from "@/api/tastingWineManage";
import imageUpload from "@/page/common/Image-upload";
import qs from "qs";
export default {
  data() {
    return {
      tableData: [],
      loading: true,
      disabled: false,
      typeOptions: [
        { value: "0", label: "禁用" },
        { value: "1", label: "启用" }
      ],
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },
      dialogVisibleImg: false,
      dialogImageUrl: "",
      formInline: {
        name: "",
        tastCode: "",
        status: ""
      },
      rules: {}
    };
  },
  mounted() {
    this.getDataList();
  },
  components: {
    imageUpload
  },
  created() {},
  methods: {
    kong() {
      this.formInline.name = "";
      this.formInline.tastCode = "";
      this.formInline.status = "";
    },
    search() {
      this.loading = true;
      this.listQuery.current = 1;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          status: this.formInline.status,
          tastCode: this.formInline.tastCode,
          name: this.formInline.name,
        //   status: 1
        }
      };
      queryPrize(data).then(res => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },
       updatePrize(uuid, status) {
      var msg = "";
      if (status == "1") {
        msg = "启用";
      } else if (status == "0") {
        msg = "禁用";
      }
      this.$confirm("确定" + msg + "当前品鉴酒吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status
          };
          updatePrize(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: msg + "成功",
                type: "success"
              });
              this.getDataList();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: "error"
              });
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    handledelete(v) {
      let data = {
        uuid: v.uuid
      };
      this.$confirm("确认删除吗？").then(_ => {
        deletePrize(data).then(res => {
          this.$message({
            showClose: true,
            message: res.message,
            type: res.code == 1 ? "success" : "error"
          });
          this.getDataList();
        });
      });
    },
    toAdd() {
      this.$router.push({
        name: "tastingWineManageDetail",
        params: {}
      });
    },
    toEdit(item) {
      this.$router.push({
        name: "tastingWineManageDetail",
        params: {
          edit: item,
              disabledFlag: false,
        }
      });
    },
     toEditsee(item) {
      this.$router.push({
        name: "tastingWineManageDetail",
        params: {
          edit: item,
              disabledFlag: true,
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getDataList();
    },

    getDataList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
        //   status: 1
        }
      };
      queryPrize(data).then(res => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.el-form-item .el-select {
  width: 100%;
}
</style>
